<template>
<el-container>
  <el-header style="background-color: white;color:black">
      <h1 align="center">用户管理界面</h1>
  </el-header>
  <el-main>
<!-- 用户表单 -->
<el-form  :inline="true" :model="queryForm" class="demo-form-inline">
  <el-form-item label="用户名">
    <el-input v-model="queryForm.userName" placeholder="输入用户名"></el-input>
  </el-form-item>
  <el-form-item label="用户电话">
    <el-input v-model="queryForm.userTel" placeholder="输入用户电话"></el-input>
  </el-form-item>
  <el-form-item label="用户邮件">
    <el-input v-model="queryForm.userEmail" placeholder="输入用户邮件"></el-input>
  </el-form-item>
  <el-form-item label="角色">
    <el-select v-model="queryForm.roleName" placeholder="请选择角色">
      <el-option label="超级管理员" value="admin"></el-option>
      <el-option label="普通管理员" value="simple"></el-option>
    </el-select>
  </el-form-item>
  <el-button style="margin-left: 20px;" type="success" size="primary" @click="loadData">查询用户</el-button>
  <el-button type="primary" @click="addUser">新增用户</el-button>
</el-form>
        <!-- 表格组件-->
        <!-- :data 当前页集合-->
        <el-table :data="list" :row-key="rw" style="100%" @selection-change="selectVal">
          <!-- 列组件-->
          <!-- prop 对应当前页集合的对象属性 -->
           <el-table-column :reserve-selection="true" type="selection" width="100"></el-table-column>
           <el-table-column prop="userId" label="用户编号" width="100"></el-table-column>
           <el-table-column prop="userName" label="用户名" width="100"></el-table-column>
           <el-table-column prop="userPwd" label="用户密码" width="100"></el-table-column>
           <el-table-column prop="userEmail" label="用户邮件" width="200"></el-table-column>
           <el-table-column prop="userTel" label="用户电话" width="200"></el-table-column>
           <el-table-column prop="roleName" label="用户角色" width="100"></el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
               <el-button
                 size="mini"
                 type="primary"
                 @click="update(scope.$index, scope.row)">修改</el-button>
               <el-button
                 size="mini"
                 type="danger"
                 @click="Delete(scope.$index, scope.row)">删除</el-button>
             </template>
           </el-table-column>
        </el-table>
        <!-- 分页组件-->
        <el-pagination
        @size-change="select"
        @current-change="selectPage"
        :current-page="queryForm.page"
        :page-sizes="[3,5,20]"
        :page-size="queryForm.row"
        :total="total"
        layout="sizes,prev,pager,next,jumper,total"
        >
        </el-pagination>

        <!-- 对话框组件（修改用户） -->
        <el-dialog title="修改用户" :visible.sync="isShow" width="50%">
          <el-form :model="formData" label-width="80px">
            <el-form-item label="用户编号" v-show="false">
                <el-input v-model="formData.userId"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="formData.userName"></el-input>
            </el-form-item>
            <el-form-item label="用户密码">
                <el-input v-model="formData.userPwd"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="formData.userTel"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="formData.userEmail"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-select v-model="formData.roleName" placeholder="请选择角色">
                <el-option label="超级管理员" value="admin"></el-option>
                <el-option label="普通管理员" value="simple"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit(0)">确定修改</el-button>
              <el-button @click="onSubmit(1)">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <!-- 对话框组件（添加用户）-->
        <el-dialog title="添加用户" :visible.sync="addisShow" width="50%">
          <el-form :model="formData" label-width="80px">
            <el-form-item label="用户编号" v-show="false">
                <el-input v-model="formData.userId"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="formData.userName"></el-input>
            </el-form-item>
            <el-form-item label="用户密码">
                <el-input v-model="formData.userPwd"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="formData.userTel"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="formData.userEmail"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-select v-model="formData.roleName" placeholder="请选择角色">
                <el-option label="超级管理员" value="admin"></el-option>
                <el-option label="普通管理员" value="simple"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit(2)">确定修改</el-button>
              <el-button @click="onSubmit(3)">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

  </el-main>
</el-container>

</template>

<script>
    export default {
          name:"paperAdd",
          data(){
              return{
                  list:[],//当前页集合
                  totalPage:0,//总页数
                  total:0,//总条数
                  queryForm:{//查询表单
                      page:1,
                      row:3,
                      userName:"",
                      userTel:"",
                      userEmail:"",
                      roleName:""
                  },
                  isShow:false, //修改用户的弹出框
                  addisShow:false, //添加用户的弹出框
                  formData:{ //用于增删改
                    roleName:"",
                    userEmail:"",
                    userId:"",
                    userName:"",
                    userPwd:"",
                    userTel:""
                  },
                  selectIds:[] //被选中表格元素的id
              }
          },
          methods:{
              loadData(){//加载数据
                var self = this;
                var http =this.$http.get("/user/userList",{params:this.queryForm});
                http.then(function(rs){
                    if(rs.data.code==200){
                          self.list = rs.data.data.list;
                          //总条数
                          self.total = rs.data.data.total;
                          //总页数
                          self.totalPage = rs.data.data.totalPage;
                    }else{
                      self.list=[];
                      self.total=0;
                    }
                })
              },
              select(row){//分页下拉框选中触发的事件,row是当前选中条数
                  this.queryForm.row = row;
                  //刷新
                  this.loadData();
              },
              selectPage(page){//选中页码触发的事件,page就是选中的页码
                this.queryForm.page = page;
                //刷新
                this.loadData();
              },
              selectVal(val){//表格的复选框选中触发的事件
                // console.log(val);
                this.selectIds = val;
              },
              rw(row){
                //设置需要保留的数据
                return row.userId;
              },

              update(index, row) {//用户数据回显
                //把当前行用户信息赋值给formData
                this.formData = row;
                this.isShow=true;
              },

              //删除用户
              Delete(index, row) {
                console.log(index, row);
                var self = this;
                var http =this.$http.get("/user/userDelete",{params:row});
                http.then(function(rs){
                    if(rs.data.code==200){
                      self.$alert(rs.data.info);
                      self.loadData();
                    }else{
                      self.$alert(rs.data.info);
                    }
                })
              },

              onSubmit(num) {
                if(num == 0){ //修改用户或删除用户
                  var self = this;
                  var http =this.$http.get("/user/userUpdate",{params:this.formData});
                  http.then(function(rs){
                      if(rs.data.code==200){
                        self.$alert(rs.data.info);
                        self.isShow = false;
                      }else{
                        self.$alert(rs.data.info);
                        self.isShow = false;
                      }
                  })
                }
                if(num == 1){
                  this.isShow = false;
                }
                if(num == 2){//新增用户
                  console.log(this.formData);
                  var self = this;
                  var http = this.$http.get("/user/userAdd",{params:this.formData});
                  http.then(function(rs){
                    if(rs.data.code == 200){
                      self.$alert(rs.data.info);
                      self.addisShow = false;
                    }else{
                      self.$alert(rs.data.info);
                      self.addisShow = false;
                    }
                  })

                }
                if(num == 3){ //关闭新增用户框
                  this.addisShow = false;
                }
              },
              addUser() { //弹出添加用户框
                this.formData = {}; //清空弹出框数据
                this.addisShow = true;
              }

          },
          mounted(){
            this.loadData();
            // this.showPaper();
          }
    }
</script>

<style>
</style>
